<script setup lang="ts">
import type { Edge, Node } from '@vue-flow/core';
import { Panel, VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { MiniMap } from '@vue-flow/minimap';
import { Controls } from '@vue-flow/controls';

import '@vue-flow/minimap/dist/style.css';
import '@vue-flow/controls/dist/style.css';

// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/special-node.vue';
import SpecialEdge from './components/special-edge.vue';

// these are our nodes
const nodes = ref<Node[]>([
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
    // Add a class name to the node
    // class: 'my-custom-node-class',
    // You can pass an object containing CSSProperties or CSS variables
    // style: { backgroundColor: 'tomato', width: '200px', height: '80px' },
  },
  {
    id: '2',
    position: { x: 250, y: 100 },
    data: { label: 'Node 2' },
  },
  {
    id: '3',
    type: 'output',
    position: { x: 250, y: 200 },
    data: { label: 'Node 3' },
  },
  {
    id: '4',
    position: { x: 250, y: 300 },
    data: { label: 'Node 4' },
  },
  {
    id: '5',
    position: { x: 250, y: 400 },
    data: {
      label: 'Node 5',
      hello: 'world',
    },
  },
]);

const edges = ref<Edge[]>([
  {
    id: 'e1->2',
    source: '1',
    target: '2',
  },
  {
    id: 'e2->3',
    source: '2',
    target: '3',
    animated: true,
  },
  {
    id: 'e3->4',
    // type: 'special',
    source: '3',
    target: '4',
    data: {
      hello: 'world',
    },
  },
  {
    id: 'e3->4',
    source: '4',
    target: '5',
    data: {
      hello: 'world',
    },
  },
]);

function addNode() {
  const id = Date.now().toString();

  nodes.value.push({
    id,
    position: { x: 150, y: 50 },
    data: { label: `Node ${id}` },
  });
}
</script>

<template>
  <div class="app-container">
    <VueFlow :nodes="nodes" :edges="edges">
      <Background />
      <MiniMap />
      <Panel>
        <button type="button" @click="addNode">
          Add a node
        </button>
      </Panel>

      <Controls />

      <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
      <template #node-special="specialNodeProps">
        <SpecialNode v-bind="specialNodeProps" />
      </template>

      <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
      <template #edge-special="specialEdgeProps">
        <SpecialEdge v-bind="specialEdgeProps" />
      </template>
    </VueFlow>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
}
</style>
